<template>
    <div class="page">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in list" :key="item" :title="item" />
            <van-back-top right="15vw" bottom="10vh" />
        </van-list>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps(['list'])
const list = ref(props.list);
const loading = ref(false);
const finished = ref(false);


const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 3000);
};

</script>

<style lang="scss" scoped>
.page {
    height: 100%;
    overflow-y: auto;
}
</style>